@import '~@/scss/GlobalVariables';
@media all and (min-width: calc(#{$tablet-width} + 1px)) {
  //=======================================================================
  // Common element style
  //=======================================================================
  @mixin input-1() {
    font-size: 14px;
    padding: 15px;
    border: 0;
    background-color: $background-color-1;
  }

  //=======================================================================
  // Password input
  //=======================================================================
  /* stylelint-disable */
  .mew-custom-form__password {
    position: relative;
    margin: 0;
    padding: 0;

    input {
      @include input-1();

      width: 100%;
    }

    .user-input-field {
      position: relative;
      margin: 0;
      padding: 0;
    }

    .password-icons {
      margin: 0;
      padding: 0;
      position: absolute;
      right: 15px;
      top: 15px;
      cursor: pointer;

      img {
        margin: 0;
        padding: 0;
      }
    }

    input {
      padding-right: 50px;
    }

    input.very-weak {
      border: 1px solid $very-weak;
    }

    input.weak {
      border: 1px solid $weak;
    }

    input.strong {
      border: 1px solid $strong;
    }

    .passwd-strength {
      margin-top: 10px;
      margin-left: 10px;
      color: $text-color-3;

      span {
        font-weight: 600;
        margin-left: 10px;
      }

      .very-weak {
        color: $very-weak;
      }

      .weak {
        color: $weak;
      }

      .strong {
        color: $strong;
      }
    }
  }
  /* stylelint-enable */

  //=======================================================================
  // Text Input
  //=======================================================================
  .mew-custom-form__search {
    position: relative;
    display: flex;

    .search-input-block {
      position: relative;
      margin: 0 auto;

      &::after {
        content: '';
        height: 20px;
        width: 20px;
        position: absolute;
        left: 21px;
        top: 21px;
        background-image: url('~@/assets/images/icons/magnifier.svg');
        background-repeat: no-repeat;
        background-position: center;
      }
      input {
        @include input-1();

        padding-left: 60px;
        position: relative;
        display: block;
      }
    }
  }

  .mew-custom-form__text {
    position: relative;

    input {
      @include input-1();

      position: relative;
      display: block;
    }
  }

  //=======================================================================
  // Custom Radio Button
  //=======================================================================
  .mew-custom-form__radio-button {
    input[type='radio'] {
      display: none;
    }

    input[type='radio'] + label {
      $radio-button-size: 17px;

      position: relative;
      border: 1px solid $light-grey-7;
      border-radius: 100%;
      height: $radio-button-size;
      width: $radio-button-size;
    }

    input[type='radio']:checked + label {
      border: 1px solid $mew-green;

      &::after {
        $radio-button-dot-size: 9px;
        $radio-button-dot-position: 3px;

        content: '';
        position: absolute;
        border-radius: 100%;
        height: $radio-button-dot-size;
        width: $radio-button-dot-size;
        background-color: $mew-green;
        top: $radio-button-dot-position;
        left: $radio-button-dot-position;
      }
    }
  }
} // @media all and (min-width: calc(#{$tablet-width} + 1px)) {
